<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="开始时间" prop="createStartTime">
        <el-date-picker
          v-model="queryParams.createStartTime"
          type="date"
          placeholder="请选择开始时间"
          clearable
          :editable="false"
          value-format="yyyy-MM-dd"
          @keyup.enter.native="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="createEndTime">
        <el-date-picker
          v-model="queryParams.createEndTime"
          type="date"
          placeholder="请选择结束时间"
          clearable
          :editable="false"
          value-format="yyyy-MM-dd"
          @keyup.enter.native="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="timeFrame">
        <el-button-group>
          <el-button
            :type="queryParams.timeFrame == 7 ? 'primary' : ''"
            @click="handleTimeFrame(7)"
            >7天</el-button
          >
          <el-button
            :type="queryParams.timeFrame == 30 ? 'primary' : ''"
            @click="handleTimeFrame(30)"
            >30天</el-button
          >
        </el-button-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="num-info">
      <div class="num-info-item">
        <div>{{ countData.num1 }}</div>
        <div class="info-item-name">
          <span>用户数</span>
          <el-tooltip content="统计全平台用户数" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="num-info-item">
        <div>{{ countData.num2 }}</div>
        <div class="info-item-name">
          <span>商品数</span>
          <el-tooltip content="统计某时间段内添加的商品总数" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="num-info-item">
        <div>{{ countData.num3 }}</div>
        <div class="info-item-name">
          <span>订单数</span>
        </div>
      </div>
      <div class="num-info-item">
        <div>{{ countData.num4 }}</div>
        <div class="info-item-name">
          <span>发起售后订单数</span>
        </div>
      </div>
    </div>

    <div class="sales-data">
      <div class="sales-data-header">
        <span>销售情况</span>
        <!-- <el-select v-model="queryParams.salesTimeFrame" @change="handleSelect">
          <el-option
            v-for="item in TimeFrameList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </div>

      <el-divider></el-divider>

      <div class="pay-info">
        <div class="pay-info-item">
          <div>{{ salesStatus.orderNumber }}</div>
          <div class="info-item-name">支付订单数</div>
        </div>
        <div class="pay-info-item">
          <div>{{ salesStatus.money }}</div>
          <div class="info-item-name">支付金额</div>
        </div>
        <div class="pay-info-item">
          <div>{{ salesStatus.userNumber }}</div>
          <div class="info-item-name">支付人数</div>
        </div>
        <div class="pay-info-item">
          <div>{{ salesStatus.productNumber }}</div>
          <div class="info-item-name">支付件数</div>
        </div>
      </div>

      <!-- <div class="echarts-title">
        <div class="echarts-title-item">
          <div class="echarts-title-icon" style="background: #3399ff"></div>
          <div>支付订单数</div>
        </div>
        <div class="echarts-title-item">
          <div class="echarts-title-icon" style="background: #ffa360"></div>
          <div>支付金额</div>
        </div>
        <div class="echarts-title-item">
          <div class="echarts-title-icon" style="background: #4bc282"></div>
          <div>支付人数</div>
        </div>
        <div class="echarts-title-item">
          <div class="echarts-title-icon" style="background: #ff8585"></div>
          <div>支付件数</div>
        </div>
      </div>

      <div class="echarts-box" ref="salesChart" style="height: 260px"></div> -->
    </div>

    <div class="ranking-wrap">
      <div class="ranking-box">
        <div class="ranking-title">
          <div>商品购买力TOP排行</div>
          <!-- <el-button type="primary">导出TOP100</el-button> -->
        </div>
        <el-divider></el-divider>
        <el-table :data="saleOfGoods" highlight-current-row>
          <el-table-column label="排名" align="center" width="80">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品" align="center" prop="good_name" />
          <!-- 如果需要后端排序，需将sortable设置为custom
              需要监听 Table 的 sort-change 事件 
          -->
          <el-table-column
            label="销售额"
            align="center"
            prop="productPrice"
            width="150"
            sortable
          />
          <el-table-column
            label="销量"
            align="center"
            prop="productNumber"
            width="150"
            sortable
          />
        </el-table>
      </div>
      <div class="ranking-box">
        <div class="ranking-title">
          <div>用户购买力TOP排行</div>
          <!-- <el-button type="primary">导出TOP100</el-button> -->
        </div>
        <el-divider></el-divider>
        <el-table :data="userPaymentAmount" highlight-current-row>
          <el-table-column label="排名" align="center" width="80">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>

          <el-table-column label="用户" align="center" prop="nick_name" />
          <!-- 如果需要后端排序，需将sortable设置为custom
              需要监听 Table 的 sort-change 事件 
          -->
          <el-table-column
            label="支付金额"
            align="center"
            prop="money"
            width="150"
            sortable
          />
          <el-table-column
            label="支付件数"
            align="center"
            prop="productNumber"
            width="150"
            sortable
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  selectUserNumberAndOrderNumberProductNumber,
  marketCondition,
  marketProductTop,
  userPayMoneyTop,
} from "@/api/data/summary";

export default {
  name: "Summary",
  data() {
    return {
      // 查询参数
      queryParams: {
        createStartTime: null,
        createEndTime: null,
        timeFrame: null,
        salesTimeFrame: 1,
      },
      // 销售情况-时间范围
      TimeFrameList: [
        {
          value: 1,
          name: "昨日",
        },
        {
          value: 2,
          name: "7日",
        },
      ],
      chart: null,
      productTable: [
        {
          sort: "01",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "02",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "03",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402691.00",
          sales: 807,
        },
        {
          sort: "04",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "05",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "06",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "07",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "08",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 888,
        },
        {
          sort: "09",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
        {
          sort: "10",
          name: "抗衰护肤品VIP套盒",
          saleroom: "402693.00",
          sales: 807,
        },
      ],
      consumerTable: [
        {
          sort: "01",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "02",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "03",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "04",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "05",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "06",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "07",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "08",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "09",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
        {
          sort: "10",
          name: "微信用户11",
          money: "402693.00",
          number: 807,
        },
      ],
      countData: {
        num1: null,
        num2: null,
        num3: null,
        num4: null,
      },
      salesStatus: {},
      saleOfGoods: [],
      userPaymentAmount: [],
    };
  },
  created() {},
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
    this.countDataDetail();
    this.getSalesStatus();
    this.getSaleOfGoods();
    this.getUserPaymentAmount();
  },
  methods: {
    /** 数据概况 用户数 订单数 商品数 统计 */
    countDataDetail() {
      selectUserNumberAndOrderNumberProductNumber(this.queryParams).then(
        (res) => {
          let index = 0;
          for (const key in this.countData) {
            this.countData[key] = res.data[index].userNumber;
            index++;
            console.log("key", this.countData);
          }
        }
      );
    },
    /**数据概况 销售情况 */
    getSalesStatus() {
      marketCondition(this.queryParams).then((res) => {
        this.salesStatus = res.data;
      });
    },
    /**数据概况 商品销售额top前十 */
    getSaleOfGoods() {
      marketProductTop(this.queryParams).then((res) => {
        this.saleOfGoods = res.data;
      });
    },
    /**数据概况 用户支付金额top前十 */
    getUserPaymentAmount() {
      userPayMoneyTop(this.queryParams).then((res) => {
        this.userPaymentAmount = res.data;
      });
    },
    initChart() {
      this.chart = echarts.init(this.$refs.salesChart);
      this.chart.setOption({
        grid: {
          top: 30,
          bottom: 30,
          left: 60,
          right: 60,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          padding: 20,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, // 显示所有标签
          },
          axisTick: {
            alignWithLabel: true, // 设置标签与刻度线对齐
          },
          data: [
            "0:00",
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "-", // 格式化y轴标签
            margin: 0,
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // 分割线
            },
          },
        },
        series: [
          {
            type: "line",
            name: "支付订单数",
            lineStyle: {
              normal: {
                color: "#3399ff",
              },
            },
            itemStyle: {
              color: "#3399ff",
            },
            data: [
              10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150,
              160, 170, 180, 190, 200, 210, 220, 230, 240,
            ],
          },
          {
            type: "line",
            name: "支付金额",
            lineStyle: {
              normal: {
                color: "#ffa360",
              },
            },
            itemStyle: {
              color: "#ffa360",
            },
            data: [
              20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160,
              170, 180, 190, 200, 210, 220, 230, 240, 250,
            ],
          },
          {
            type: "line",
            name: "支付人数",
            lineStyle: {
              normal: {
                color: "#4bc282",
              },
            },
            itemStyle: {
              color: "#4bc282",
            },
            data: [
              30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160,
              170, 180, 190, 200, 210, 220, 230, 240, 250, 260,
            ],
          },
          {
            type: "line",
            name: "支付件数",
            lineStyle: {
              normal: {
                color: "#ff8585",
              },
            },
            itemStyle: {
              color: "#ff8585",
            },
            data: [
              40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170,
              180, 190, 200, 210, 220, 230, 240, 250, 260, 270,
            ],
          },
        ],
      });
    },
    // 时间范围按钮
    handleTimeFrame(dayNum) {
      let date = Date.now();
      this.queryParams.timeFrame = dayNum;
      if (dayNum == 7) {
        this.queryParams.createEndTime = this.$dayjs(new Date()).format(
          "YYYY-MM-DD"
        );
        this.queryParams.createStartTime = this.$dayjs(
          new Date(date - 1000 * 60 * 60 * 24 * 7)
        ).format("YYYY-MM-DD");
      }
      if (dayNum == 30) {
        this.queryParams.createEndTime = this.$dayjs(new Date()).format(
          "YYYY-MM-DD"
        );
        this.queryParams.createStartTime = this.$dayjs(
          new Date(date - 1000 * 60 * 60 * 24 * 30)
        ).format("YYYY-MM-DD");
      }
    },
    // 搜索按钮
    handleQuery() {
      // this.queryParams.pageNum = 1;
      // this.queryParams.pageSize = 10;
      debugger;
      this.countDataDetail();
      this.getSalesStatus();
    },
    // 重置按钮
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 销售情况-时间范围
    handleSelect(value) {
      console.log("value----", value);
    },
  },
};
</script>

<style lang="less" scoped>
.num-info {
  display: flex;
  padding: 20px 0;

  .num-info-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    border-left: 1px dashed #eff1f7;

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      color: #303133;
    }

    .info-item-name {
      margin: 6px 0 0;
      color: #92959b;
      font-size: 16px;

      span {
        font-size: 16px;
        margin: 0 4px 0 0;
      }
    }
  }

  .num-info-item:first-child {
    border: none;
  }
}

.sales-data {
  margin: 20px 0 0;

  .sales-data-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pay-info {
    display: flex;
    justify-content: space-between;

    .pay-info-item {
      width: 22%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      padding: 40px 0;
      border: 1px solid #3399ff;
      border-radius: 10px;

      div {
        display: flex;
        justify-content: center;
        font-size: 28px;
        color: #303133;
      }

      .info-item-name {
        margin: 6px 0 0;
        color: #92959b;
        font-size: 16px;
      }
    }
  }

  .echarts-title {
    display: flex;
    margin: 0 0 0 50px;

    .echarts-title-item {
      display: flex;
      align-items: center;
      margin: 0 45px 0 0;
      padding: 30px 0;

      .echarts-title-icon {
        width: 16px;
        height: 16px;
        margin: 0 10px 0 0;
      }
    }
  }

  .echarts-box {
    margin: 0 0 40px;
  }
}

.ranking-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .ranking-box {
    width: 48%;

    .ranking-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 20px;
    }
  }
}
</style>
